<template>
  <div class="index">
    <div class="footer"></div>
    <p>自我技能掌握</p>
    <echart :option="option"></echart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        tooltip: {
          //item和line搭配，将实现鼠标放置柱条上即可显示提示框，无阴影或者线条
          trigger: "item",
          axisPointer: {
            type: "line"
          }
        },
        grid: {
          top: "15%",
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true
        },
        xAxis: [
          {
            type: "value",
            splitLine: {
              //坐标轴在grid区域的分割线
              show: false
            },
            axisLabel: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "category",
            data: ["HTML5", "CSS3", "javascript", "Node", "Vue"],
            inverse: true, //数组翻转显示
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              fontWeight: "bold",
              color: "rgb(241, 241, 244)",
              fontSize: 16
            }
          },
          {
            type: "category",
            data: [60, 78, 75, 45, 70],
            inverse: true, //数组翻转显示
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLine: {
              show: false //不显示y轴的线
            },
            axisLabel: {
              textStyle: {
                fontSize: 14,
                color: "#fff"
              }
            }
          }
        ],
        series: [
          {
            type: "bar",
            yAxisIndex: 0,
            data: [60, 78, 75, 45, 70],
            barWidth: "40%", //柱条的宽度
            label: {
              show: true,
              color: "rgb(0, 10, 66 )",
              fontSize: 14,
              formatter: function(params) {
                //柱条上的文字
                return params.data + "%";
              }
            },
            itemStyle: {
              borderRadius: 10, //圆角
              color: function(params) {
                return ["#9999FF", "#0066FF", "#33FFFF", "#33FF00", "#FF9900"][
                  params.dataIndex
                ];
              }
            }
          },
          {
            type: "bar",
            yAxisIndex: 1, //使两个柱状图重合的效果
            barWidth: "50%",
            data: [100, 100, 100, 100, 100],
            label: {
              show: false
            },
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 4,
              borderRadius: 10 //圆角
            }
          }
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  p {
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 8px;
    left: 0;
  }
  .rightTopEchart {
    width: 100%;
    height: 100%;
  }
  // 使用伪元素做边框
  .footer {
    &::before {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-left: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &::after {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-right: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>